<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-05 17:02:43
-->
<template>
  <div id="leftContainer2" style="height: 95%"></div>
</template>
<script>
import { Column } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  methods: {
    initCache() {
      const data = [
        {
          name: "离线",
          city: "柳州",
          value: 7,
        },
        {
          name: "在线",
          city: "柳州",
          value: 5,
        },
        {
          name: "离线",
          city: "南宁",
          value: 6,
        },
        {
          name: "在线",
          city: "南宁",
          value: 1,
        },
        {
          name: "离线",
          city: "钦州",
          value: 6,
        },

        {
          name: "在线",
          city: "钦州",
          value: 6,
        },
        {
          name: "离线",
          city: "桂林",
          value: 9,
        },
        {
          name: "在线",
          city: "桂林",
          value: 4,
        },
        {
          name: "离线",
          city: "河池",
          value: 6,
        },
        {
          name: "在线",
          city: "河池",
          value: 4,
        },
        {
          name: "离线",
          city: "百色",
          value: 3,
        },
        {
          name: "在线",
          city: "百色",
          value: 6,
        },
      ];

      const stackedColumnPlot = new Column("leftContainer2", {
        data,
        isGroup: true,
        xField: "city",
        yField: "value",
        seriesField: "name",
        /** 设置颜色 */
        color: ["#F70997", "#f88c24"],
        /** 设置间距 */
        marginRatio: 0.1,
        xAxis() {
          range: [0, 1];
          label: {
            style: {
              fill: "yellow";
            }
          }
        },
        yAxis() {
          range: [0, 1];
          label: {
            style: {
              fill: "yellow";
            }
          }
        },
        tooltip: {
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(47, 6, 170, 0.3)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontFamily: "微软雅黑",
            },
          },
        },
        label: {
          // 可手动配置 label 数据标签位置
          position: "top", // 'top', 'middle', 'bottom'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: "interval-adjust-position" },
            // 数据标签防遮挡
            { type: "interval-hide-overlap" },
            // 数据标签文颜色自动调整
            { type: "adjust-color" },
          ],
        },
      });
      stackedColumnPlot.render();
    },
  },
  mounted() {
    this.initCache();
  },
};
</script>